const vectorSource = new ol.source.Vector({
    url: '../jsons/countries.geojson',
    format: new ol.format.GeoJSON()
});

const createStyle = (src, img) => {
    return new ol.style.Style({
        image: new ol.style.Icon({
            anchor: [0, 0],
            crossOrigin: 'anonymous',
            src,
            img,
            imgSize: img ? [img.width, img.height] : undefined
        })
    })
};

const iconFeature = new ol.Feature(new ol.geom.Point([0, 0]));
iconFeature.set('style', createStyle('../public/address.png', undefined));

const map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM()
        }),
        new ol.layer.Vector({
            source: vectorSource
        }),
        new ol.layer.Vector({
            style: feature => feature.get('style'),
            source: new ol.source.Vector({
                features: [iconFeature]
            })
        })
    ],
    target: 'map',
    view: new ol.View({
        zoom: 5,
        center: [0, 0],
        // rotation: Math.PI / 4
    })
});

document.getElementById("zoom-in").addEventListener('click', function () {
    const view = map.getView();
    const zoom = view.getZoom();
    view.setZoom(zoom + 1)
});

document.getElementById("zoom-out").addEventListener('click', function () {
    const view = map.getView();
    const zoom = view.getZoom();
    view.setZoom(zoom - 1)
});

